<template>
  <view class="">
 <view class="background-view" style="color:gold; ">
   <view style="display: flex;justify-content: center;padding-top: 20px;">
     <view style=" font-size: 20px">
      {{detailList.creditMin}}~ {{detailList.creditMax}}
   </view>
   </view>
   <view style="display: flex;justify-content: center; ">
     <view style="font-family: '黑体'; font-size: 20px;">
    申请额度(万)
  </view>
   </view>
   <view style="display: flex;justify-content: space-around; padding-top: 20px; ">
     <view class="">
       <view style="display: flex;justify-content: center;  ">
      <view style=" font-size: 20px;">
     {{detailList.rateMin}}~{{detailList.rateMax}}
   </view></view>
    <view style="display: flex;justify-content: center;  ">
 <view style=" font-size: 20px;">
   参考利率(%)
 </view>
   </view></view>
     <view class="" >
       <view style="display: flex;justify-content: center;  ">
      <view style=" font-size: 20px;">
     {{detailList.deadlineMin}}~{{detailList.deadlineMax}}
   </view></view>
    <view style="display: flex;justify-content: center;  ">
 <view style=" font-size: 20px;">
   申请期限(月)
 </view>
   </view></view>
    </view>
     <view style="display: flex;justify-content: center; padding-top: 20px; ">
       <image :src="getBankIcon(detailList.bankName)" mode="widthFix" style="width: 50px;"></image>
  </view>
 </view>
<view style="font-family: '黑体'; font-size: 24px;margin-left: 10px;margin-top: 10px; font-weight: bold;">产品详细介绍</view>
<view class="card">
<view class="">
  {{detailList.introduction}}
</view></view>
<view style="font-family: '黑体'; font-size: 24px;margin-left: 10px;margin-top: 10px; font-weight: bold;">产品详情</view>
<view class="card">
  <view style="display: flex;margin-top:7px">
  <view class="" style="color:rgb(132, 132, 132);font-weight: bold;font-family: '黑体';">
    金融机构
  </view>
  <view class="" style="margin-left: 20px; font-weight: bold;font-family: '黑体';">
   {{detailList.bankName}}
  </view>
  </view>
  <view style="display: flex;margin-top:7px">
  <view class="" style="color:rgb(132, 132, 132);font-weight: bold;font-family: '黑体';">
    担保方式
  </view>
  <view class="" style="margin-left: 20px;font-weight: bold;font-family: '黑体';">
   信用保证
  </view>
  </view>
  <view style="display: flex;margin-top:7px">
  <view class="" style="color:rgb(132, 132, 132);font-weight: bold;white-space: nowrap;font-family: '黑体';">
    贷款用途
  </view>
  <view class="" style="margin-left: 20px;font-weight: bold;font-family: '黑体';">
   {{detailList.useOfProceeds}}
  </view>
  </view>
  <view style="display: flex;margin-top:7px">
  <view class="" style="color:rgb(132, 132, 132);font-weight: bold; white-space: nowrap;font-family: '黑体';">
    产品特点
  </view>
  <view class="" style="margin-left: 20px;font-weight: bold;font-family: '黑体';">
   {{detailList.characteristic}}
  </view>
  </view>
<view style="display: flex;margin-top:7px">
  <view class="" style="color:rgb(132, 132, 132);font-weight: bold; white-space: nowrap;font-family: '黑体';">
    适用客户
  </view>
  <view class="" style="margin-left: 20px; white-space: pre-line;font-weight: bold;font-family: '黑体';">
    {{detailList.client}}
  </view>
  </view>
</view>
<view style="font-family: '黑体'; font-size: 24px;margin-left: 10px;margin-top: 10px; font-weight: bold;">申请条件</view>
<view class="card">
  {{detailList.requirement}}

</view>
<view style="font-family: '黑体'; font-size: 24px;margin-left: 10px;margin-top: 10px; font-weight: bold;">申请材料</view>
<view style="padding-bottom: 50px;">
  <view class="card" >
  {{detailList.material}}
</view>
</view>

<view style="display: flex;bottom: 0;position:fixed;width: 100%;">
  <button style="flex: 1;">产品比较</button>
   <button style="flex: 1;">月供测算</button>
      <button style="flex: 1; background-color:blue ; color: white;">立即申请</button>
</view>

</view>
</template>

<script>
  import config from '@/config'
  import Vue from 'vue';
    import {ref} from 'vue';
    import {
    listBank
      } from "@/api/bank/bank.js";
    import {
    messageCredit
      } from "@/api/credit/credit.js";
  /* import uni from 'uni-app'; */
 
    export default {
      data(){
        return{
               baseUrl :config.baseUrl,
          loading: false, 
		  open:false,
          form:{},
          detailList:[],
          bankList:[],
          queryParams: {
              pageNum: 1,
              pageSize: 10,
              loginAccount: null,
              password: null,
              areaId: null,
              isAdmin: null,
            },
                  columns: [
                    { label: '采集人员ID', prop: 'id', align: 'center' },
                    { label: '登录账号', prop: 'loginAccount', align: 'center' }
                  ]
        }
      },
     methods: {
       getBankIcon(bankName) {
            const bank = this.bankList.find((b) => b.bankName === bankName);
            return bank?`${this.baseUrl}${bank.bankIcon}`: ''; // 如果找到了对应的银行信息，返回 bankIcon，否则返回空字符串
          },
      async  getList(id) {
          this.loading = true;
       try {
                 const response = await messageCredit(id);
                 this.detailList = response.data;
                 
                 this.$nextTick(() => {
                     this.loading = false;
                 });
             } catch (error) {
                 console.error("获取用户列表数据失败：", error);
                 this.loading = false;
             }
       },
       async  getbankList() {
           this.loading = true;
        try {
                  const response = await listBank();
                  this.bankList = response.data.records;
                  this.$nextTick(() => {
                      this.loading = false;
                  });
              } catch (error) {
                  console.error("获取银行数据失败：", error);
                  this.loading = false;
              }
        },
      },
    onLoad(options) {
      this.getList(options.id)
      this.getbankList()
      console.log(this.detailList)
    }
    }
</script>

<style>
  .card {
    background-color: white;
    border: 1px solid #ccc;
    border-radius:5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 95%;
    margin: 10px;
    padding: 10px;
    font-family: Arial, sans - serif;
  }
  .background-view {
    background-image: url('~@/static/images/banner/banner01.jpg');
   background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 25vh;
  }
	.popup-content-wrapper {
	  border: 1px solid white;
	  border-radius: 5px;
	  padding: 10px;
	  background-color: white;
	}
	.dialog-footer {
	  display: flex;
	  justify-content: flex-end;
	  padding: 10px;
	
/* 	  uni-button {
	    margin-left: 10px;
	  } */
	}
</style>